<!DOCTYPE html>
<html>
  <head>
    <script src="../dist/jspsych.js"></script>
    <script src="../dist/plugin-html-keyboard-response.js"></script>
    <script src="../dist/plugin-image-keyboard-response.js"></script>
    <script src="../dist/plugin-preload.js"></script>
    <link rel="stylesheet" href="../dist/jspsych.css">
  </head>
  <body></body>
  <script>

    var jsPsych = initJsPsych({
      on_finish: function () {
        jsPsych.data.displayData();
      }
    });

    var images = ["img/1.gif", "img/2.gif", "img/3.gif", "img/4.gif", "img/5.gif", "img/6.gif", "img/7.gif", "img/8.gif", "img/9.gif", "img/10.gif"];

    var trials = [];
    for (var i = 0; i < images.length; i++) {
      trials.push({
        stimulus: images[i]
      });
    }

    var preload = {
      type: jsPsychPreload,
      auto_preload: true
    };

    var block = {
      type: jsPsychImageKeyboardResponse,
      choices: ['y','n'],
      stimulus_width: 300,
      prompt: '<p>Press "y" to continue. Press "n" to end this node of the experiment.</p>',
      on_finish: function(data) {
        if (jsPsych.pluginAPI.compareKeys(data.response, "n")) {
          jsPsych.endCurrentTimeline();
        }
      },
      timeline: trials
    };

    var after_block = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: '<p>The next node.</p><p>Press any key to finish.</p>',
    };

    jsPsych.run([preload, block, after_block]);

  </script>
</html>
